<template>
	<view class="conent">
		<u-navbar title="个人中心" titleStyle="font-weight: 800;margin-top:80rpx;" :is-back="false"
			:safeAreaInsetTop="false" height="180rpx">
		</u-navbar>
		<view class="conent_box">
			<view class="user">
				<u--image src="https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/userBg.png"
					width="100%" height="100px" radius="20"></u--image>
				<view class="userInfo">
					<button class="avatarUrl" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image :src="user.avatarUrl" class="avatar-img"></image>
					</button>
					<input class="nickname" type="nickname" :value="user.nickName" @blur="bindblurNickName"
						placeholder="请输入昵称" />
					<input class="nickname" type="phone" :value="user.phoneNumber" @blur="bindblurPhoneNumber"
						placeholder="请输入绑定号码" />
					<!-- <u-icon nickName="close-circle" label="退出登录" size="50rpx" @click="quitLogin"></u-icon> -->

					<view style="padding: 0 40rpx;">
						<u-gap height="2" bgColor="#F2F2F2" marginTop="20"></u-gap>
					</view>
				</view>
				<view class="nav">
					<u-grid :border="false" col="5">
						<u-grid-item v-for="(item,index) in navList" :key="index"
							@click="orderStatus(item.orderStatus)">
							<u--image :showLoading="true" :src="item.imageUrl" width="32px" height="32px"
								radius="50%"></u--image>
							<u--text :text="item.title" align="center" size="12" color="#000"
								customStyle="margin-top:10rpx;"></u--text>
						</u-grid-item>
					</u-grid>
					<u-toast ref="uToast" />
				</view>
			</view>
			<!-- <view class="set">
				<u-cell-group :border="false">
					<u-cell :title="item.title" :icon="item.imageUrl" titleStyle="text-align:left;" isLink
						v-for="(item,index) in handleList" :key="index" @click="document(item)"></u-cell>
				</u-cell-group>
			</view> -->
			<view class="set">
				<u--text text="我的工具" align="left" size="18" bold lineHeight="40" color="#000"
					customStyle="margin-left:20rpx;"></u--text>
				<u-grid :border="false" col="4">
					<u-grid-item v-for="(item,index) in handleList" :key="index" customStyle="margin-bottom:20rpx;"
						@click="handleDocument(item)">
						<u-icon :name="item.icon" :label="item.title" labelSize="12" labelPos="bottom" size="34"
							color="#e5ca8e"></u-icon>
						<!-- <u--image :showLoading="true" :src="item.imageUrl" width="32px" height="32px"
							radius="50%"></u--image>
						<u--text :text="item.title" align="center" size="12" color="#000"
							customStyle="margin-top:10rpx;"></u--text> -->
					</u-grid-item>
					<u-grid-item customStyle="margin-bottom:20rpx;">
						<button type='default' open-type='contact'
							style="border: none;background: #fff;font-size: 12px;padding: 0;">
							<u-icon name="server-fill" label="客服" labelSize="12" labelPos="bottom" size="34"
								color="#e5ca8e"></u-icon>
						</button>
					</u-grid-item>
				</u-grid>
				<u-toast ref="uToast" />
			</view>
			<view class="set">
				<u--text text="我的认养" align="left" size="18" bold lineHeight="40" color="#000"
					customStyle="margin-left:20rpx;"></u--text>
				<u-grid :border="false" col="4">
					<u-grid-item v-for="(item,index) in fosterList" :key="index" customStyle="margin-bottom:20rpx;"
						@click="fosterDocument(item)">
						<u-icon :name="item.icon" :label="item.title" labelSize="12" labelPos="bottom" size="34"
							color="#e5ca8e"></u-icon>
					</u-grid-item>
					<u-grid-item customStyle="margin-bottom:20rpx;">
						<button type='default' open-type='share'
							style="border: none;background: #fff;font-size: 12px;padding: 0;">
							<u-icon name="account" label="分享甜蜜" labelSize="12" labelPos="bottom" size="34"
								color="#e5ca8e"></u-icon>
						</button>
					</u-grid-item>
				</u-grid>
				<u-toast ref="uToast" />
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue'
	import {
		onShow
	} from "@dcloudio/uni-app";
	import router from '@/api/router';
	import {
		updateUserInfo
	} from "@/api/pages/user.js"
	import api from "@/api/api.js"
	const user = ref({
		avatarUrl: "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0",
		nickName: "用户名",
		phoneNumber: "13656322365"
	})
	onMounted(() => {
		uni.getStorage({
			key: 'account',
			success: (res) => {
				console.log("res", res.data)
				user.value = res.data
			}
		})
	})
	//更改头像
	const onChooseAvatar = (e) => {
		console.log("e", e)
		const tempFilePath = e.detail.avatarUrl //上传的图片地址
		const maxSizeInBytes = 1024 * 1024 * 12 // 限制大小为1MB
		uni.getFileSystemManager().getFileInfo({
			filePath: tempFilePath,
			success: res => {
				console.log("res==选中头像", res)
				const fileSize = res.size
				if (fileSize > maxSizeInBytes) {
					//如果上传的图片大小超过1MB，进行提示
					// uni.$showMsg('请上传小于1MB的图片')
					uni.showToast({
						title: '请上传小于1MB的图片',
						icon: 'error',
						duration: 2000
					});
					return
				}
				//图片大小符合，替换图片
				user.value.avatarUrl = tempFilePath
				console.log("user.value.avatarUrl", user.value.avatarUrl)
				//将更改的图片上传到服务器
				uni.uploadFile({
					// url: 'http://...', //后端接口url
					url: api.baseUrl + '/jeecg-boot/sys/oss/file/uploadFile',
					filePath: user.value.avatarUrl,
					name: 'file',
					// header: {
					// 	Authorization: 'Bearer ' + uni.getStorageSync(
					// 		"accessToken") // 将 token 添加到请求的 header 中
					// },
					formData: {
						user: 'test'
					},
					success(res) {
						const fileRes = JSON.parse(res.data)
						console.log("res-头像上传==", res, fileRes.result.url)
						user.value.avatarUrl = fileRes.result.url
						getUpdateUserInfo({
							nickName: user.value.nickName,
							avatarUrl: fileRes.result.url,
							phoneNumber: user.value.phoneNumber
						})
						uni.showToast({
							title: fileRes.message,
							duration: 2000
						});

					}
				})
			}
		})
	}

	//获取微信昵称
	const bindblurNickName = async e => {
		const newNickname = (user.value.nickName = e.detail.value)
		getUpdateUserInfo({
			nickName: user.value.nickName,
			avatarUrl: user.value.avatarUrl,
			phoneNumber: user.value.phoneNumber
		})
		//将更改的昵称上传给接口
		// const res = await requestNickname({
		// 	newNickname
		// })
		// uni.$showMsg(res.data.message)
	}
	const bindblurPhoneNumber = async e => {
		const phoneNumber = (user.value.phoneNumber = e.detail.value)
		getUpdateUserInfo({
			nickName: user.value.nickName,
			avatarUrl: user.value.avatarUrl,
			phoneNumber: user.value.phoneNumber
		})
		//将更改的昵称上传给接口
		// const res = await requestNickname({
		// 	newNickname
		// })
		// uni.$showMsg(res.data.message)
	}
	const getUpdateUserInfo = async (userInfor) => {
		const res = await updateUserInfo(userInfor)
		const account = {
			...user.value
		}
		console.log(account);
		uni.setStorage({
			key: "account",
			data: account,
			success(res) {
				console.log('数据存储成功');
			},
			fail(err) {
				console.error('数据存储失败', err);
			}
		})
	}

	const navList = ref([{
			imageUrl: "https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/orderStatus1.png",
			title: "待付款",
			orderStatus: '0',
			url: "/pageB/order/unpay"
		},
		{
			imageUrl: "https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/orderStatus2.png",
			title: "待发货",
			orderStatus: '1',
			url: "/pageB/order/unbilled"
		},
		{
			imageUrl: "https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/orderStatus3.png",
			title: "待收货",
			orderStatus: '2',
			url: "/pageB/order/uncollected"
		},
		{
			imageUrl: "https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/orderStatus4.png",
			title: "已完成",
			orderStatus: '3',
			url: "/pageB/order/completed"
		},
		{
			imageUrl: "https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/orderStatus5.png",
			title: "全部订单",
			orderStatus: '',
			url: "/pageB/order/allOrder"
		}
	])
	const orderStatus = (orderStatus) => {
		router.navigateTo({
			url: "/pageB/order/orderStatus?orderStatus=" + orderStatus
		})
	}
	const setList = ref([{
			imageUrl: "https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/set1.png",
			title: "地址管理",
			url: "/pageD/feature/address",
		},
		{
			imageUrl: "https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/set2.png",
			title: "附近设备",
			url: "/pageD/feature/equipment",
		},
		{
			imageUrl: "https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/set3.png",
			title: "设置",
			url: "/pageD/feature/setting",
		}
	])
	const feature = (url) => {
		router.navigateTo({
			url: url
		})
	}
	const handleList = ref([{
			imageUrl: "https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/tabbar/order-1.png",
			icon: 'car',
			title: "购物车",
			url: "/pageD/goods/cart",
		}, {
			imageUrl: "https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/set1.png",
			icon: 'map',
			title: "地址管理",
			url: "/pageD/feature/address",
		},
		// {
		// 	imageUrl: "https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/set2.png",
		//	icon:'car',
		// 	title: "附近设备",
		// 	url: "/pageD/feature/equipment",
		// },
		// {
		// 	imageUrl: "https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/set3.png",
		//	icon:'car',
		// 	title: "设置",
		// 	url: "/pageD/feature/setting",
		// },
		// {
		// 	imageUrl: "https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/set4.png",
		//	icon:'car',
		// 	title: "在线客服",
		// 	url: "/pageD/document/customer",
		// },
		// {
		// 	imageUrl: "https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/set5.png",
		// 	icon: 'email',
		// 	title: "投诉建议",
		// 	url: "/pageD/document/suggestion",
		// },
		{
			imageUrl: "https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/set6.png",
			icon: 'info-circle',
			title: "帮助",
			url: "/pageD/document/assist",
		},
		{
			imageUrl: "https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/set7.png",
			icon: 'calendar',
			title: "隐私政策",
			url: '/pageA/events/detail'
		}
	])
	const handleDocument = (item) => {
		if (item.title == '地址管理') {
			router.navigateTo({
				url: item.url
			})
			return
		}
		router.navigateTo({
			url: item.url + '?title=' + item.title
		})
	}
	const fosterList = ref([{
			imageUrl: "",
			icon: "home",
			title: "蜂箱",
			url: "/pageD/foster/hive",
		}, {
			imageUrl: "",
			icon: "eye",
			title: "监控查询",
			url: "/pageD/foster/ezplayer",
		}, {
			imageUrl: "",
			icon: "chat",
			title: "消息提醒",
			url: "/pageD/foster/chat",
		}
		// , {
		// 	imageUrl: "",
		// 	icon: "account",
		// 	title: "分享甜蜜",
		// 	url: "",
		// },
	])
	const fosterDocument = (item) => {
		if (item.title == '蜂箱') {
			router.navigateTo({
				url: item.url
			})
			return
		}
		router.navigateTo({
			url: item.url + '?title=' + item.title
		})
	}
</script>

<style lang="scss" scoped>
	.conent_box {
		margin-top: 180rpx !important;
		padding: 10rpx 10rpx 120rpx 10rpx;

		.user {
			padding-bottom: 20rpx;
			border-radius: 40rpx;
			box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
			background: #fff;
			position: relative;

			.userInfo {
				// padding: 40rpx;
				width: 100%;
				margin: auto;
				position: relative;
				top: -50rpx;

				// left: 20rpx;
				.avatarUrl {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50rpx;
					border: 2rpx solid white;
					box-shadow: 0 1rpx 5rpx black;
					padding: 0;

					.avatar-img {
						width: 100%;
						height: 100%;
					}
				}

				.nickname {
					// color: white;
					margin-top: 20rpx;
					text-align: center;
					font-size: 30rpx;
					font-weight: bold;
				}
			}
		}

		.set {
			margin-top: 20rpx;
			padding: 0 20rpx;
			border-radius: 40rpx;
			box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
			background: #fff;

			uni-button:after,
			button::after {
				border: none;
			}

		}
	}
</style>